<template>
    <div class="active-singer">
        <div class="active-singer-top-bar">
            <p class="font-bold">入驻歌手</p>
            <p class="more-singer-info" @click="getRouterToArtistList">查看全部&gt;</p>
        </div>
        <div v-for="(item, index) in artists.slice(0, 10)" :key="index">
            <active-singer-item :name="item.name" :pic-url="item.img1v1Url" :info="item.alias[0]"
                                :id="item.id"></active-singer-item>
        </div>
    </div>
</template>

<script>
import ActiveSingerItem from "@/views/home/active-singer/ActiveSingerItem";
import {getArtist} from "@/network/artist/artist";
import {onMounted, ref} from "vue";
import {useNotification} from "naive-ui";
import {useRouter} from "vue-router";

export default {
    name: "ActiveSinger",
    components: {
        ActiveSingerItem
    },
    setup() {
        const router = useRouter();
        const artists = ref([]);
        onMounted(() => {
            getArtist(-1, 7, 5).then(res => {
                artists.value = res.data.artists;
            })
        })
        
        // 跳转到歌手列表页面
        const getRouterToArtistList = () => {
            router.push({path: '/discover/artist'});
        }
        return {
            artists,
            getRouterToArtistList
        }
    }
}
</script>

<style scoped lang="scss">
.active-singer {
    @apply m-4 p-2;
    .active-singer-top-bar {
        @apply flex border-b border-gray-400;
        .more-singer-info {
            @apply my-auto ml-auto cursor-pointer hover:underline;
            color: #666666;
        }
    }
}
</style>